<template>
  <div
    id="timeAxis"
    :style="{ 'margin-top': top, paddingLeft: spacing, paddingRight: spacing }"
  >
    <cell-title
      v-if="isShowModuleName || option.isMore === '1'"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        background: backgroundColor,
        'border-radius': radiusSize + ' ' + radiusSize + ' 0 0',
      }"
    />
    <div class="boxLimit">
      <div
        :id="isInitData ? option.id : 'timeAxisSwiper'"
        class="swiper"
        :style="{ height: option.timeAxisHeight + 'px' }"
      >
        <div class="swiper-wrapper">
          <div
            v-for="item in 5"
            :key="item"
            :class="[
              option.timeAxisDirection === '1'
                ? 'boxDirection-horizontal'
                : 'boxDirection-vertical',
              'swiper-slide',
            ]"
          >
            <div class="boxTop">
              <van-icon name="circle" />
              <div class="line" />
            </div>
            <div
              class="boxContent"
              :style="{ height: option.timeAxisHeight + 'px' }"
            >
              <div class="boxBorder">{{ option.compName }}</div>
              <div class="time">1925年xx月</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import mixins from '../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  name: 'TimeAxis',
  components: { CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: ''
    }
  },
  computed: {},
  watch: {
    option: function(newVal, oldVal) {
      // console.log(newVal, oldVal, '监听')
      if (newVal.timeAxisDirection && oldVal.timeAxisDirection) {
        if (newVal.timeAxisDirection !== oldVal.timeAxisDirection) {
          this.initSwiper()
        }
      }
      if (newVal.compName && !oldVal.compName) {
        this.$nextTick(function() {
          this.initSwiper()
        })
      }
    }
  },
  mounted() {
    if (!this.option.timeAxisDirection) {
      // console.log('设置默认值')
      this.option.timeAxisDirection = '2'
      this.option.timeAxisHeight = 450
      this.option.compName = ''
    } else {
      this.initSwiper()
    }
  },
  methods: {
    // 初始化swiper
    initSwiper() {
      this.swiper = ''
      console.log('初始化swiper', this.option, this.isInitData)
      const ths = this
      ths.swiper = new Swiper(
        this.isInitData
          ? `#${ths.option.id} .swiper`
          : '#timeAxisSwiper .swiper',
        {
          slidesPerView: ths.option.timeAxisDirection === '1' ? 'auto' : 2,
          loop: true,
          observer: true,
          observeParents: true,
          loopedSlides: 3,
          direction:
            ths.option.timeAxisDirection === '1' ? 'horizontal' : 'vertical'
          // on: {
          //   click: function(e) {
          //     // 后台管理不能跳转
          //     return
          //   }
          // }
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/utility/rem.scss';
@import '~@/styles/mixin.scss';
#timeAxis {
	// .swiper {
	// 	height: 450px;
	// }
	width: rem(750);
	.boxLimit {
		// max-height: 500px;
		// overflow-y: auto;
		overflow: hidden;
		.boxDirection-horizontal {
			width: 210px;
			height: 100%;
			.boxBorder {
				margin-left: 10px;
				width: rem(400);
				height: rem(250);
				border-radius: 4px;
				margin-top: 10px;
				border: 1px solid #666;
			}
			.boxContent {
				height: 100%;
			}
			.boxTop {
				width: 100%;
				display: flex;
				align-items: center;
				.line {
					width: 100%;
					border-top: 1px solid #ff0000;
				}
			}
			.time {
				margin-top: 10px;
				text-align: right;
			}
		}
		.boxDirection-vertical {
			width: 100%;
			// height: 100%;
			display: flex;
			.boxBorder {
				margin-left: 10px;
				width: 95%;
				height: 170px;
				border-radius: 4px;
				margin-top: 10px;
				border: 1px solid #666;
			}
			.boxTop {
				// width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				.line {
					// width: 100%;
					height: 100%;
					border-left: 1px solid #ff0000;
				}
			}
			.boxContent {
				width: 100%;
			}
			.time {
				margin-top: 10px;
				text-align: right;
			}
		}
	}
}
</style>
